<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX GET JSON</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery1.7.2.js" ></script>
<script type="text/javascript">
	$(function(){
		$("#name").change(function(){
			$.post(
				"jsonPluginAction",{name:$("#name").val()},
				function(returnedData, status){
					var member = returnedData;
					var id = member.id;
					var name = member.name;
					var address = member.address;
					var html="<table border='1' cellspacing='0' bordercolor='#FF0099'><tr align='center'><td>id</td><td>name</td><td>address</td><tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+address+"</td><tr></table>";
					$("#ibody table:eq(0)").remove();
					$("#ibody").append(html);
				}
			);
		});
	});
</script>
</head>
<body id="ibody">
<h3>Ajax Get JSON</h3>
<br><hr color="red">
<br>
<select id="name" >
	<option value="Tom">Tom</option>
	<option value="Jerry">Jerry</option>
</select><br><br>
</body>
</html>